$px: 1px;
@for $i from 1 through 100 {
  .pad-#{$i} {
    padding: $i * $px;
  }
  .bor-ra-#{$i} {
    border-radius: $i * $px;
  }
  .pad-t-#{$i} {
    padding-top: $i * $px;
  }
  .pad-b-#{$i} {
    padding-bottom: $i * $px;
  }
  .pad-l-#{$i} {
    padding-left: $i * $px;
  }
  .pad-r-#{$i} {
    padding-right: $i * $px;
  }
  .mar-t-#{$i} {
    margin-top: $i * $px;
  }
  .mar-b-#{$i} {
    margin-bottom: $i * $px;
  }
  .mar-l-#{$i} {
    margin-left: $i * $px;
  }
  .mar-r-#{$i} {
    margin-right: $i * $px;
  }
  .w-#{$i}-box {
    width: $i * $px !important;
  }
  .w-#{$i}-p {
    width: $i * 1%;
  }

  .pad-#{$i}-i {
    padding: $i * $px !important;
  }
  .bor-ra-#{$i}-i {
    border-radius: $i * $px !important;
  }
  .pad-t-#{$i}-i {
    padding-top: $i * $px !important;
  }
  .pad-b-#{$i}-i {
    padding-bottom: $i * $px !important;
  }
  .pad-l-#{$i}-i {
    padding-left: $i * $px !important;
  }
  .pad-r-#{$i}-i {
    padding-right: $i * $px !important;
  }
  .mar-t-#{$i}-i {
    margin-top: $i * $px !important;
  }
  .mar-b-#{$i}-i {
    margin-bottom: $i * $px !important;
  }
  .mar-l-#{$i}-i {
    margin-left: $i * $px !important;
  }
  .mar-r-#{$i}-i {
    margin-right: $i * $px !important;
  }
}
.pad-b-none {
  padding-bottom: 0 !important;
}
.my-shop-box {
  padding: 12px;
  min-width: 650px;
}

.flex-x {
  display: flex;
}

.flex-y {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.al-end {
  align-items: flex-end !important;
}

.al-s {
  align-items: stretch !important;
}

.al-base {
  align-items: baseline !important;
}

.al-center {
  align-items: center !important;
}

.flex-w {
  flex-wrap: wrap;
}

.al-start {
  align-items: flex-start !important;
}

.cur-point {
  cursor: pointer;

  &:hover {
    @include fontColor();

    i {
      @include fontColorImportant();
    }
  }
}
.just-cur-point {
  cursor: pointer;
}

.mar-l-5 {
  margin-left: 5px !important;
}

.mar-l-10 {
  margin-left: 10px !important;
}

.mar-r-120 {
  margin-right: 120px;
}

.mar-r-128 {
  margin-right: 128px;
}

.mar-r-140 {
  margin-right: 140px;
}

.mar-r-190 {
  margin-right: 190px;
}

.mar-r-210 {
  margin-right: 210px;
}

.mar-r-245 {
  margin-right: 245px;
}

.font-32 {
  font-size: 32px;
}

.font-24 {
  font-size: 24px;
}

.font-28 {
  font-size: 28px;
}

.font-20 {
  font-size: 20px;
}

.font-16 {
  font-size: 16px;
}

.font-14 {
  font-size: 14px;
}
.font-14-i {
  font-size: 14px !important;
}
.font-18 {
  font-size: 18px !important;
}

.font-12 {
  font-size: 12px;
}
.font-12-i {
  font-size: 12px !important;
}

.font-12-i {
  font-size: 12px !important;
}

.font-13 {
  font-size: 13px;
}
.font-13-i {
  font-size: 13px !important;
}

.font-10 {
  font-size: 10px;
}

.font-16 {
  font-size: 16px;
}

.font-w-600 {
  font-weight: 600;
}

.font-w-500 {
  font-weight: 500;
}

.min-w-214 {
  min-width: 214px;
}

.min-w-361 {
  min-width: 361px;
}

.min-w-500 {
  min-width: 500px;
}

.min-w-604 {
  min-width: 604px;
}

.min-w-620 {
  min-width: 620px;
}

.min-w-406 {
  min-width: 406px;
}

.min-w-650 {
  min-width: 650px;
}

.min-w-700 {
  min-width: 700px;
}

.w-128 {
  width: 128px;
}

.w-228 {
  width: 228px;
}

.w-33-present {
  width: 33.33%;
  box-sizing: border-box;
}

.h-32 {
  height: 32px;
}
.h-100-p {
  height: 100%;
}

.overHideCon-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}

.overHideCon-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}

.overHideCon-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}

.color-w {
  color: #fff;
}

.color-ccc {
  color: #ccc;
}

.color-666 {
  color: #666;
}

.color-primary {
  color: $color-primary !important;
}

.color-danger {
  color: $color-danger;
}

.can-move {
  cursor: move;
}

.el-input__suffix {
  right: 0;
}

.el-dialog__headerbtn {
  top: 0 !important;
  bottom: 0;
  margin: 0;
}

.box-12-t-b {
  padding: 12px 0;
}

.box-12-r-l {
  padding: 0 12px;
}

.box-10 {
  padding: 10px;
}

.box-12 {
  padding: 12px;
}

.text-center {
  text-align: center;
}

.color-999 {
  color: #999;
}

.pos-r {
  position: relative;
}

.max-w-100p {
  max-width: 100%;
}

.max-w-488 {
  max-width: 488px;
}

.bg-w {
  background: #fff;
}

.jus-center {
  justify-content: center;
}

.jus-bet {
  justify-content: space-between;
}

.jus-end {
  justify-content: flex-end;
}

.over-x-h {
  overflow-x: hidden;
}

.over-x-s {
  overflow-x: scroll;

  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;

  /* IE 10+ */
  &::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
}

.over-y-s {
  overflow-y: scroll;

  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;

  /* IE 10+ */
  &::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
}

.size-160 {
  width: 160px;
  height: 160px;
}
.size-52 {
  width: 52px;
  height: 52px;
}
.size-50 {
  width: 50px;
  height: 50px;
}
.size-32 {
  width: 32px;
  height: 32px;
}
.size-24 {
  width: 24px;
  height: 24px;
}

.size-42-r {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.size-52-r {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.normal-form-view-box {
  padding: 8px 20px;
}

.scroll-y {
  overflow-y: scroll;
}

.scroll-box-y {
  height: 100vh;
  overflow: hidden;
}

.normal-btn-box {
  padding: 12px 0;
  display: flex;
  align-items: center;
}

.el-tooltip__popper {
  max-width: 35%;
}

.guide-point {
  z-index: 997 !important;
  position: sticky !important;
  position: -webkit-sticky !important;
}

.hide-scroll {
  &::-webkit-scrollbar {
    display: none;
  }
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}

.al-c {
  align-items: center !important;
}
.el-table--border {
  border: none;
  padding: 0;
  &::after {
    width: 0 !important;
  }
}
.link-text {
  color: $color-primary;
  cursor: pointer;
  margin-right: 10px;
}
.no-link {
  color: #333;
}

.separate-top-normal {
  border-top: 1px dashed;
}

.view-type-box {
  box-shadow: -1px 0 8px rgba(0, 0, 0, 0.125);
  .view-type-item {
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }
  .view-type-item-check {
    background: $color-primary;
    color: #fff;
  }
}

.c-info-fe {
  color: $color-info;
}

.rotatez-180 {
  transform: rotateZ(180deg);
}

.bbx-plan-time-picker{
    .el-picker-panel__footer {
      button:first-child{
        display: none;
      }
    }
}
.c-primary{
  color:$color-primary;
}
